<!-- 6.HTML_и_CSS_основы_веб-верстки/My_code/page_6.3.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style_6.3.css">
    <title>Page Devider</title>
</head>
<body>
    <!-- div - разделитель страницы на блоки -->
    <div class="article">

    </div>
    <div class="spatial-courses">
        <!-- Создаем заголовок title этого элемента div-->
        <h2 class="spatial-courses__title">
            Учитесь в Нетологии
        </h2>
        <div class="course-list">
            <div class="course">
                <!-- НАЗВАНИЕ БЛОКА И ЕГО ЭЛЕМЕНТА РАЗДЕЛЯЕТСЯ ДВУМЯ НИЖНИМИ ПОДЧЕРКИВАНИЯМИ!!! -->
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных
                    </p>
                </div>
                <!-- Добавим ссылку -->
                <!-- ЕСЛИ В НАЗВАНИИ КЛАССА НЕСКОЛЬКО СЛОВ ОНИ РАЗДЕЛЯЮТСЯ ДЕФФИСОМ!!! -->
                <a href="#" class="coorse__read-more">
                    Подробнее
                </a>
            </div>
        </div>
    </div>
    <div class="other-courses">
        <h2 class="other-courses__title">
            Выбирите профессию
        </h2>
        <div class="course-list">
            <div class="course">
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных
                    </p>
                </div>
                
            </div>
            <div class="course">
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных
                    </p>
                </div>
                
            </div>
        </div>
    </div>

</body>

<!-- РАЗМЕТКА С ПОМОЩЬЮ ТЭГОВ html5 -->

<body>
    <!-- main - основное содержимое страницы-->
    <main class="article">

    </main>
    <!-- section - части основной сути объединенные общим смыслом -->
    <section class="spatial-courses">
        <!-- Создаем заголовок title этого элемента div-->
        <h2 class="spatial-courses__title">
            Учитесь в Нетологии
        </h2>
        <div class="course-list">
            <!-- article - список разделенных осмысленных независимых частей -->
            <article class="course">
                <!-- НАЗВАНИЕ БЛОКА И ЕГО ЭЛЕМЕНТА РАЗДЕЛЯЕТСЯ ДВУМЯ НИЖНИМИ ПОДЧЕРКИВАНИЯМИ!!! -->
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных
                    </p>
                </div>
                <!-- Добавим ссылку -->
                <!-- ЕСЛИ В НАЗВАНИИ КЛАССА НЕСКОЛЬКО СЛОВ ОНИ РАЗДЕЛЯЮТСЯ ДЕФФИСОМ!!! -->
                <a href="#" class="coorse__read-more">
                    Подробнее
                </a>
            </article>
        </div>
    </section>
    <!-- section - части основной сути объединенные общим смыслом -->
    <section class="other-courses">
        <h2 class="other-courses__title">
            Выбирите профессию
        </h2>
        <div class="course-list">
            <article class="course">
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных
                    </p>
                </div>
            </article>
            <article class="course">
                <h3 class="course__title">Data Scintist</h3>
                <div class="course__description">
                    <p>
                        Программист, специалист по анализу данных 2
                    </p>
                </div>    
            </article>
        </div>
    </section>

</body>


</html>